<template>
  <div class="animation">
    <!-- 顶部 -->
    <div class="top">
      <div class="topContainer">
        <div class="pic">
          <img src="@/assets/author/孔乙己.png" />
        </div>
        <div class="textbox">
          <p>
            感谢<span style="font-weight: bold; color: #fc3d49; font-size: 30px"
              >孔乙己</span
            >对NBA2K17动作补丁的卓越贡献，以下补丁皆由孔神创作，补丁优化了空气墙和溜冰等问题，充分发掘了游戏潜力。
            <br />
            孔神的E站id：咕噜咕噜怪，欢迎关注和支持他的创作。
            <br />
            以下Mod替换完后都需要<span style="color: #fc3d49">重新启动</span
            >游戏。
          </p>
        </div>
      </div>
    </div>
    <!-- 中部 -->
    <div class="middle">
      <!-- modList -->
      <div class="mod" v-for="(mod, index) in modList" :key="index">
        <!-- mod标题 -->
        <div class="title">
          <img :src="require('@/assets/icon/' + mod.name + '.png')" />
          <span>{{ mod.name }}</span>
          <div class="bar"></div>
        </div>
        <!-- mod描述 -->
        <div class="description">
          {{ mod.description }}
        </div>
        <!-- mod操作 -->
        <div class="handler">
          <el-select
            v-model="mod.selectedMod"
            placeholder="请选择"
            style="width: 300px"
          >
            <el-option
              v-for="item in mod.modList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button
            type="primary"
            class="button"
            style="margin-left: 0.5%"
            @click="modSelect(mod.selectedMod, mod.name, mod.modFolderPath)"
            ><img style="width: 15px" src="@/assets/icon/打勾.png"
          /></el-button>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import mainApi from "@/api/mainApi";
import { ElMessage } from "element-plus";

export default {
  name: "动作补丁",
  props: {
    propsData: {
      type: Object,
      default: "",
    },
  },

  data() {
    return {
      modList: [],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      mainApi.writeDailyLog("初始化渲染完成，开始preload" + "--Animation.vue");
      // 读取文件仓库中的文件
      mainApi.readJson(ElMessage, (data) => {
        mainApi.writeDailyLog(
          "读取文件仓库路径" + data.fileHouse + "--Animation.vue"
        );
        // 遍历文件路径
        animationInit(window.myApi.path.join(data.fileHouse, "/animation"));
      });
    });

    // 初始化
    function animationInit(folderPath) {
      let fs = window.myApi.fs;
      let path = window.myApi.path;

      if (!fs.existsSync(folderPath)) {
        console.log("文件夹不存在:", folderPath);
        mainApi.writeDailyLog("文件夹不存在:" + folderPath + "--Animation.vue");
        return;
      }

      let files;
      try {
        // 读取文件夹内容
        files = fs.readdirSync(folderPath);
      } catch (error) {
        console.log("文件读取失败", error);
        mainApi.writeDailyLog("文件读取失败:" + error + "--Animation.vue");
      }
      console.log(files);

      // 读取introduction.json
      // jsonHandler(fs.readFileSync(path.join(), "utf8"),folderPath);
      jsonHandler(folderPath, files[1]);
    }

    // json处理
    function jsonHandler(folderPath, data) {
      let fs = window.myApi.fs;
      let path = window.myApi.path;

      // 解析JSON字符串
      data = JSON.parse(fs.readFileSync(path.join(folderPath, data), "utf8"));

      const jsonData = [];
      for (const key in data) {
        // 读取文件列表
        let modFolderPath = path.join(folderPath, key);

        if (!fs.existsSync(modFolderPath)) {
          console.log("文件夹不存在:", modFolderPath);
          mainApi.writeDailyLog(
            "文件夹不存在:" + modFolderPath + "--Animation.vue"
          );
          return;
        }

        let modFolderList;
        try {
          // 读取文件夹内容
          modFolderList = fs.readdirSync(modFolderPath);
        } catch (error) {
          console.log("文件读取失败", error);
          mainApi.writeDailyLog("文件读取失败:" + error + "--Animation.vue");
        }

        // 解析为select数组
        let modList = [];
        modFolderList.forEach((folder) => {
          modList.push({
            key: folder,
            value: folder,
          });
        });

        // 载入数组
        jsonData.push({
          name: key,
          description: data[key],
          modList,
          selectedMod: "",
          modFolderPath,
        });
      }
      console.log(jsonData);
      proxy.modList = jsonData;
    }

    // 选择mod
    function modSelect(name, type, folderPath) {
      if (name === "") return;
      console.log(name, type);
      // 文件仓库路径
      let filePath = folderPath + "\\" + name;
      console.log(filePath);
      mainApi.writeDailyLog("执行替换:" + filePath + "--Animation.vue");
      // 执行替换
      mainApi.modReplace(filePath, name);
    }

    return { modSelect };
  },
};
</script>
    
<style lang="less" scoped>
@import "../less/variables.less";
.animation {
  height: 94%;
  width: 100%;
  position: relative;
  top: 3px;
  display: flex;
  flex-direction: column;
}
.top {
  flex: 0.2;
  // border: @border;
  > .topContainer {
    display: flex;
    flex-direction: row;
    > .pic {
      flex: 0.15;
      margin: 1%;
      margin-left: 0;
      > img {
        width: 100%; /* 或者使用max-width */
        box-shadow: @box-shadowRed;
        // height: 100%; /* 或者使用max-height */
        object-fit: contain; /* 或者使用cover */
      }
    }
    > .textbox {
      // border: @border;
      flex: 0.85;
      line-height: 35px;
      font-size: 20px;
      font-family: "华文中宋";
    }
  }
}
.middle {
  flex: 0.8;
  // border: @border;
  display: flex;
  flex-direction: column;
  > .mod {
    > .title {
      font-family: "TW Cen MT";
      font-size: 150%;
      > div {
        background-color: @red;
        opacity: 0.4;
        width: 80px;
        height: 5px;
        border-radius: 50px;
        margin-top: -8px;
        margin-left: 32px;
      }
      > img {
        width: 30px;
        position: relative;
        top: 8px;
        margin-right: 2px;
      }
    }
    > .description {
      margin: 1% 0;
      line-height: 25px;
    }
  }
}
</style>
    